<!--医院端--订单跟踪--批发采购订单列表--详情（已完成） -->
<template>
  <div class="auth-product completedDetailsBox">
    <el-container class="completedDetails">
      <!-- 列表 -->
      <el-collapse
        class="collapsebox"
        v-model="activeitemNames"
        @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <el-form
              ref="form"
              class="topForm"
              :model="receiptDetailsForm"
              label-width="130px">
              <el-form-item label="平台订单编号:">
                <div/>
              </el-form-item>
              <el-form-item label=" 订单状态:">
                <div/>
              </el-form-item>
              <el-form-item label=" 订下单时间:">
                <div/>
              </el-form-item>
              <el-form-item label=" 医疗机构:">
                <div/>
              </el-form-item>
            </el-form>
          </template>
          <div>
            <el-header height="auto">
              <div class="formToptext">
                <el-form
                  :inline="true"
                  :model="formdata"
                  ref="ruleForm"
                  label-width="150px" >
                  <el-form-item
                    v-for="(item,index) in completedDetailsDetailForm"
                    :key="index"
                    :label="item.title">
                    <div
                      v-if="item.key === 'sickSex'"
                      class="textBox">：{{ statusArr[Number(formdata[item.key])] }}</div>
                    <div
                      v-else
                      class="textBox">：{{ formdata[item.key] }}</div>
                  </el-form-item>
                </el-form>
              </div>
            </el-header>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-container>

    <!-- 发货信息 -->

    <div class="partTitle">发货信息</div>
    <el-container class="completedDetails">
      <el-collapse
        class="collapsebox"
        v-model="activeNames"
        @change="handleChange">
        <el-collapse-item
          v-for="(childItem,index) in getList"
          :key="index"
          name="1">
          <!-- 标题 -->
          <template slot="title">
            <div class="titleBox">
              <div class="formBox">
                <el-form
                  ref="form"
                  class="receiptDetailsForm"
                  :model="childItem"
                  label-width="100px">
                  <el-form-item label="配送单号:">
                    <div>{{ childItem.deliveryCode }}</div>
                  </el-form-item>
                  <el-form-item label="配送时间:">
                    <div>{{ childItem.createdAt }}</div>
                  </el-form-item>
                  <el-form-item label="配送单数量:">
                    <div>{{ childItem.sendNumCount }}</div>
                  </el-form-item>
                  <el-form-item label="订单金额:">
                    <div>{{ childItem.sumPrice }}</div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
          <!-- 表格 -->
          <div>
            <el-editable
              class="hospital-edit-box"
              :data="childItem.needItemList"
              height="200"
              v-loading="tableLoading"
              :columns="completedDetailsTable"
            >
              <template
                slot="default-placeholder"
                slot-scope="scope">
                <el-editable
                  class="hospital-edit-box"
                  :data="scope.row.distributorList"
                  height="200"
                  v-loading="tableLoading"
                  :columns="completedDetailsTableInside"
                />
              </template>
            </el-editable>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-container>

    <!-- 退回明细 -->

    <div class="partTitle">退回明细</div>
    <el-container class="completedDetails">
      <el-collapse
        class="collapsebox"
        v-model="receiptActiveNames"
        @change="handleChange">
        <el-collapse-item name="1">
          <!-- 标题 -->
          <template slot="title">
            <div class="titleBox">
              <div class="formBox">
                <el-form
                  ref="form"
                  class="receiptDetailsForm"
                  :model="returnDetailsForm"
                  label-width="140px">
                  <el-form-item label="术后退回单号:">
                    <div>4123124123123</div>
                  </el-form-item>
                  <el-form-item label="退回时间:">
                    <div/>
                  </el-form-item>
                  <el-form-item label="退回单数量:">
                    <div/>
                  </el-form-item>
                  <el-form-item label="退回金额:">
                    <div/>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
          <!-- 表格 -->
          <div>
            <el-editable
              class="hospital-edit-box"
              :data="getList"
              height="200"
              v-loading="tableLoading"
              :columns="returnDetailsTable"
            >
              <template
                slot="default-placeholder"
                slot-scope="scope">
                <el-editable
                  class="hospital-edit-box"
                  :data="scope.row.distributorList"
                  height="200"
                  v-loading="tableLoading"
                  :columns="returnDetailsTableInside"
                />
              </template>
            </el-editable>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-container>
  </div>
</template>

<script>
import {
  completedDetailsDetailForm,
  statusArr,
  completedDetailsTable,
  completedDetailsTableInside,
  returnDetailsTable,
  returnDetailsTableInside
} from './const'
import SearchForm from '@components/businesscomponents/search'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import ElEditable from '@components/el-editable'
import {
  returnOneInfo,
  getHospitalFollowTableList,
  getHospitalFollowSend,
  getHospitalFollowTableOne,
  getHospitalPurchaseOrderList,
  getHospitalPurchaseOrderItem
} from '@const/beforeSettleApi'
import { cloneDeep, isObject } from 'lodash'
export default {
  components: { ElEditable, SearchForm },
  data () {
    return {
      completedDetailsTable,
      // 展开收起
      activeitemNames: ['1'],
      // 展开收起
      activeNames: [],
      // 退回明细展开收起
      receiptActiveNames: [],
      // 订单状态
      statusArr,
      // 表格Loading
      tableLoading: false,
      // 表格数据
      getList: [],
      // 表单编辑默认值
      formdata: {},
      // 表单 详情展示内容-table
      completedDetailsDetailForm,
      // 发货信息
      receiptDetailsForm: {

      },
      // 退回明细
      returnDetailsForm: {

      },
      // 退回明细表头
      returnDetailsTable,
      // 退回明细二级表头
      returnDetailsTableInside,
      // 部分收货内部
      completedDetailsTableInside,
      // 详情ID
      detailsId: this.$route.query.id

    }
  },

  mounted () {
    let arr = [
      { type: 'button', val: '返回', handle: this.back }
    ]
    const btn = {
      type: 'btn',
      arr: arr
    }
    this.$store.commit('changeLayoutHandle', btn)

    this.list()
    this.getDetails()
    this.getHeadInfo()
    this.sendList()
  },

  methods: {
    // 点击返回
    back () {
      this.$router.go(-1)
    },
    // 获取详情数据
    getDetails () {
      // // Loading加载开始
      // this.formLoading = true
      // // 请求列表数据
      // this.$axios
      //   .$post(getHospitalFollowTableList, {
      //     id: this.detailsId
      //   }).then(res => {
      //     let content = isObject(res.payload.content) ? res.payload.content : []
      //     this.formdata = content[0]
      //     this.formLoading = false
      //   })
      //   .finally(res => {
      //     this.formLoading = false
      //   })
    },
    // 获取发货明细
    sendList () {
      this.$axios({
        method: 'get',
        url: getHospitalFollowSend,
        params: {
          id: this.$route.query.id,
          type: 3
        }
      }).then(res => {
        console.log(res, '列表数据')
        this.getList = res.data.payload
      })
    },
    // 获取头部信息
    getHeadInfo () {
      this.$axios({
        method: 'post',
        // url: getHospitalFollowTableOne,
        url: returnOneInfo,
        params: {
          id: this.$route.query.id
        }
      }).then(res => {
        console.log(res, 'title数据')
        this.formdata = isObject(res.data.payload) ? res.data.payload : {}
      })
    },
    // 获取详情列表
    list () {
      // // Loading加载开始
      // this.tableLoading = true
      // // 请求列表数据
      // this.$axios
      //   .$post(getHospitalPurchaseOrderItem, {
      //     id: this.detailsId,
      //     page: this.curPage,
      //     pageSize: this.pageSize
      //   }).then(res => {
      //     let { content, totalElements } = isObject(res.payload) ? res.payload : {}
      //     this.getList = content
      //     this.totalElements = totalElements
      //     this.tableLoading = false
      //   })
      //   .finally(res => {
      //     this.tableLoading = false
      //   })
    },
    // 展开收起
    handleChange (val) {
      console.log(val)
    }
  }
}
</script>

<style lang="less">
.completedDetailsBox {
  .partTitle {
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    display: block;
    margin: 20px;
  }
}

.completedDetails {
  //   height: 100%;
  //   overflow: auto;
  .topForm {
    display: flex;
  }

  .collapsebox {
    width: 100%;

    .titleBox {
      width: 100%;
    }

    .formBox {
      width: 500px;
      float: left;
    }

    .submissionBox {
      float: right;
      margin-right: 10px;
    }
  }

  .receiptDetailsForm {
    display: flex;
  }

  .addbutton {
    border: none;
    background: none;
    color: rgba(35, 113, 197, 1);
  }

  .submission {
    background: rgba(35, 113, 197, 1);
    border: 0;
    color: #fff;
    margin-bottom: 10px;
  }

  .topInput {
    width: 211px;
  }

  .pagination {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    padding-right: 0;
  }

  .formToptext {
    // margin-bottom: 20px;

    .el-form-item {
      margin-right: 16px;
      // margin-bottom: 16px;

      .textBox {
        width: 220px;
      }
    }

    .el-form-item__label {
      padding-right: 10px;
    }
  }
}
</style>
